<template>
  <div class="main-box">
    <div class="left">
      <!-- 搜索框 -->
      <div class="input-box">
        <el-input
          v-model="form.keyword"
          size="small"
          placeholder="输入员工姓名全员搜索"
          prefix-icon="el-icon-search"
          @input="changeValue"
        />
      </div>
      <!-- 树形控件 -->
      <el-tree
        ref="treeRef"
        :data="dataArr"
        :props="defaultProps"
        node-key="id"
        default-expand-all
        highlight-current
        :expand-on-click-node="false"
        @current-change="currentChange"
      />
    </div>
    <div class="right">
      <!-- 上方buttom按钮 -->
      <div class="top-box">
        <el-row type="flex" justify="end">
          <el-button size="small" type="primary" @click="addEmployee">添加员工</el-button>
          <el-button size="small" plain @click="importExcel">excel导入</el-button>
          <el-button size="small" plain @click="exportExcel">excel导出</el-button>
        </el-row>
      </div>
      <!-- 下方表格 -->
      <div class="bottom-box">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column align="center" fixed prop="staffPhoto" label="头像" width="110">
            <!-- 需要处理一下变成图标 如果没有图片就变成一个我们自己做的图片 -->
            <template v-slot="{row}">
              <el-avatar v-if="row.staffPhoto" :src="row.staffPhoto" :size="35" align="center" />
              <div v-else class="user-user-img">{{ row.username?.charAt(0) }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="username" label="姓名" width="100" />
          <el-table-column align="center" prop="mobile" label="手机号" width="120" />
          <el-table-column align="center" prop="workNumber" label="工号" width="120" />
          <el-table-column align="center" prop="formOfEmployment" label="聘用形式" width="110">
            <!-- 需要把1和0处理一下变成 正式和试用 -->
            <template v-slot="{row}">
              <span>{{ row.formOfEmployment === 1 ?'正式':'试用' }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="departmentName" label="部门" width="125" />
          <el-table-column align="center" prop="timeOfEntry" label="入职时间" width="120" />
          <el-table-column align="center" fixed="right" label="操作" width="130">
            <template v-slot="{row}">
              <el-button type="text" size="small" @click="lookClick(row.id)"> 查看 </el-button>
              <el-button type="text" size="small" @click="jueClick(row.id)"> 角色 </el-button>
              <el-button type="text" size="small" @click="deleteclick(row.id)"> 删除 </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 底部分页 -->
      <el-row type="flex" style="height:60px" align="middle" justify="end">
        <!-- 放置分页组件 -->
        <!-- page-size 每页显示条目个数 -->
        <!-- current-page 当前页数 -->
        <!-- handleCurrentChange 点击时会触发的时间 -->
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :current-page="form.page"
          :page-size="form.pagesize"
          @current-change="handleCurrentChange"
        />
      </el-row>
      <!--  弹框 -->
      <el-dialog width="700px" title="分配角色" :visible.sync="showDialog" @close="close">
        <el-form ref="ruleFormref" label-width="100px">
          <el-checkbox-group v-model="roleIds">
            <el-checkbox v-for="item in roleList" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
          </el-checkbox-group>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" style="width:100px;" @click="yesClick">确认</el-button>
          <el-button style="width: 100px;" @click="noClick">取消</el-button>
        </div>
      </el-dialog>
    </div>
    <!--  导入  表格导入的组件 通过父子传值 把showExcelDialog 传给子组件 -->
    <importExcel :show-excel-dialog.sync="showExcelDialog" @getSysUser="getSysUser" />
  </div>
</template>

<script>
import { companyDepartmentRequest } from '@/api/department'
import { transListToTreeData } from '@/utils'
import { getSysUserRequest, getExportRequest, delSysUserRequest, getUserRequest, putSysUserRequest } from '@/api/employee'
import { debounce } from 'lodash'
import FileSaver from 'file-saver'
import importExcel from '@/views/employee/components/import-excel.vue'
// 获取-已启用的角色列表 发送的axios
import { getEnabledList } from '@/api/role'
export default {
  name: 'Employee',
  components: {
    importExcel
  },
  data() {
    return {
      // 总条数
      total: 0,
      // 搜索框
      input: '',
      // 树形控件
      dataArr: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 用于接收发送的axios渲染点击分配角色后弹框的选择框的数组
      roleList: [],
      // 点击出现弹框
      showDialog: false,
      // 用于弹框里面选择框选中的状态
      roleIds: [],
      // 声明一个id 用于发送分配角色的id
      idlist: '',
      // 表单
      tableData: [],
      // 用于发送请求需要放在请求data里面的数据
      form: {
        page: 1, // 当前页码数
        pagesize: 10, // 当前页面需要的数据条数
        keyword: '', // 表单输入 根据名字模糊查询
        departmentId: null // 部门id,根据部门查询当前部门及子部门的用户
      },
      showExcelDialog: false // 控制导入excel的弹层显示和隐藏 默认隐藏
    }
  },
  // 使用 created 函数 调用 获取左侧树状员工列表的axios
  created() {
    this.companyDepartmen()
    // 封装输入框input防抖debounce
    this.changeValue = debounce(this.changeValue, 400)
  },
  methods: {
    async companyDepartmen() {
      // 封装 发送axios获取左侧树状员工列表的axios
      const res = await companyDepartmentRequest()
      // 调用递归方法
      this.dataArr = transListToTreeData(res.data, 0)
      // 把树状结构里面第一个数据的id传给from里面的departmentId 作为首次渲染页面的值
      this.form.departmentId = this.dataArr[0].id
      // 获取了树形组件的 所有数据以后， 将第一个数据高亮显示
      // 设置选中节点
      // 树组件渲染是异步的 等到更新完毕
      this.$nextTick(() => {
        // 此时意味着树渲染完毕
        this.$refs.treeRef.setCurrentKey(this.form.departmentId)
      })
      // 默认渲染右侧的表格列表
      this.getSysUser()
    },
    // 弹框里面的X按钮
    close() {
      this.showDialog = false
    },
    //  (因为这个发送请求 我们多个地方需要使用 那么我们可以直接进行封装)
    async getSysUser() {
      const data = await getSysUserRequest(this.form)
      console.log(data)
      // 把响应回来的数据赋值给表单的tableData 底部分页total
      this.tableData = data.data.rows
      this.total = data.data.total
    },
    // 树状结构当前选中某个节点变化时触发的事件(用户点击某一行tree，得到当前行的数据。)
    // 传递的item里面的id 就是我们发请求需要的id 也可以通过点击某一行 进行发送请求 渲染页面(这里可以直接调用我们封装好的请求)
    currentChange(item) {
      // 每次左侧选择新部门的时候 都要从第一页开始请求
      this.form.page = 1
      this.form.departmentId = item.id
      this.getSysUser()
    },

    // 切换分页时的事件
    handleCurrentChange(val) {
      console.log(val)
      this.form.page = val // 赋值当前页码
      this.getSysUser()// 重新渲染页面
    },
    // 监听输入框文字改变 发请求
    changeValue() {
      // 防抖:单位时间内 只执行最后一次
      // 节流:单位时间内 只执行一次
      this.getSysUser() // 重新渲染页面 但是考虑到防抖 我们把输入框 全部使用防抖来处理 (lodash)
    },
    // 导出员工excel
    async exportExcel() {
      const result = await getExportRequest()
      // console.log(result) // 使用一个npm包 直接将blob文件下载到本地 file-saver
      // FileSaver.saveAs(blob对象,文件名称)
      FileSaver.saveAs(result, '员工信息表.xlsx') // 下载文件
    },
    // 导入员工excel
    importExcel() {
      // 开启导入表格的弹窗
      this.showExcelDialog = true
    },
    // 点击删除按钮
    async deleteclick(id) {
      // 点击发送ajax请求
      await delSysUserRequest(id)
      // 提示框
      this.$message('删除完成')
      // 重新刷新页面
      this.getSysUser()
    },
    // 点击新增员工 此处需要跳转到另外一个页面
    addEmployee() {
      console.log(1)
      this.$router.push('/employee/detail')
    },
    // 点击表单查看按钮
    lookClick(id) {
      this.$router.push(`/employee/detail/${id}`)
    },
    // 点击角色按钮 弹出模态框
    async jueClick(id) {
      this.idlist = id
      // 发送获取-已启用的角色列表的axios 用于渲染选择框(通过v-for遍历渲染)
      const res = await getEnabledList()
      this.roleList = res.data
      // 发送获取-员工基本信息的axios 用于获取当前员工已有的选择权限,页面就会自动勾选
      const ress = await getUserRequest(id)
      this.roleIds = ress.data.roleIds
      // 最后弹出模态框 要等前面的数据渲染好了之后再弹出
      this.showDialog = true
    },
    // 点击按钮后 模态框里面的确认按钮
    async yesClick() {
      // 点击确定 发送 分配-员工-角色 的axios
      const res = await putSysUserRequest({
        id: this.idlist,
        roleIds: this.roleIds
      })
      console.log(res)
      // 提示框
      this.$message('已分配完成')
      // 取消模态框
      this.showDialog = false
    },
    // 取消按钮
    noClick() {
      // 取消模态框
      this.showDialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
.main-box{
  min-height: 92vh;
  padding: 10px;
  background:  #f5f6f8;
  display: flex;
  .left{
    padding: 20px;
    flex: 0 0 250px;
    width: 500px;
    background: #fff;
    border-right: 1px solid #eaeef4;
    .input-box{
      margin-bottom: 15px;
    }
  }
  .right{
    padding: 30px;
    flex:1;
    background:#fff;
    .top-box {
      margin-bottom: 15px;
    }
    .user-user-img {
      margin: 0 auto;
      width: 35px;
      height: 35px;
      background-color: #276ffb;
      text-align: center;
      line-height: 35px;
      color: #f0f4ff;
      border-radius: 50%;
    }
  }
}
</style>
